<template>
    <div>
        <div class="title">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
            <span>胖猫注册</span>
        </div>
        <input class="account" type="text" placeholder="输入要注册的账号" v-model="account">
        <input class="password" type="text" placeholder="输入密码" v-model="password">
        <input class="again" type="text" placeholder="输入手机号码" v-model="tel">
        <input class="code" type="text" placeholder="验证码" v-model="code">
        <van-button type="danger" @click="register">注册</van-button>
        <div class="telPhoneRegister">手机号注册</div>
    </div>
</template>

<script>
    export default {
        name: "Reigster",
        data() {
            return {
                account: '',
                password: '',
                tel: '',
                code: ''
            }
        },
        methods: {
            register() {
                if (this.account =='' || this.password == '' || this.tel == '' || this.code == '') return alert('请填写完整信息')

                this.$post('auth/register',{
                    username: this.account,
                    password: this.password,
                    mobile: this.tel,
                    code: this.code
                })
                .then(res => {
                    alert('注册成功')
                    this.$router.push({name: 'login'})
                })
                .catch(err => {
                    console.log(err.data)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
  .title {
    position: relative;
    width: 375px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    text-align: center;

    .van-icon-arrow-left {
      position: absolute;
      left: 0px;
      line-height: 45px;
      margin-left: 11px;
      font-size: 18px;
    }
  }

  .account {
    margin-left: 48px;
    margin-top: 28px;
    margin-bottom: 25px;
    width: 280px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid #ccc;
  }

  .password {
    margin-left: 48px;
    margin-bottom: 25px;
    width: 280px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid #ccc;
  }

  .again {
    margin-left: 48px;
    width: 280px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid #ccc;
  }

  .code {
    margin-top: 25px;
    margin-left: 48px;
    width: 280px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid #ccc;
  }

  .van-button--danger {
    margin-left: 68px;
    margin-top: 50px;
    width: 240px;
    height: 45px;
    border-radius: 20px;
    background-color: #F60C00;
  }

  .telPhoneRegister {
    margin-left: 257px;
    margin-top: 50px;
    font-size: 14px;
    color: #666666;
  }
</style>
